<!DOCTYPE>
<html>
<head>
  <title>MarkerCluster</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=visualization&key=RD6BZ-KGRE3-VPT3H-3WFIY-WBF4E-ITFX6"></script>
  <style type="text/css">
      #map_canvas {
          position: absolute;
          left: 320px;
          min-width: 800px;
          min-height: 767px;
          border: 1px solid #ff0000;
      }
      #mapButtion{
          padding: 5px;
          border:2px solid #86acf2;
          background:#ffffff
      }
  </style>
</head>
<body onload="window.init()">
<div id="map_canvas"></div>
<div>
  <button id="mapButtion">点击打开地图</button>
</div>
<script type="text/javascript">
  var markerIndex = 0;
  var map;

  function $(a) {
    return document.getElementById(a);
  }
  //设置一个机器点data 和 热力图的点data
  var machineSitedata = [
    [39.959228, 116.367874],
    [39.984486, 116.427612],
    [39.988169, 116.279984],
    [39.847558, 116.402893],
    [39.941857, 116.383667],
    [40.022882, 116.551208],
    [39.819085, 116.581421],
    [39.924482, 116.205826],
    [39.757880, 116.162567],
    [39.631606, 116.325989],
    [39.797986, 116.415253],
    [40.117990, 116.416626],
    [40.271668, 116.638412],
    [40.143190, 116.236038],
    [39.928168, 116.515503],
    [39.902362, 116.389160],
    [39.935539, 116.377487]
  ];
  window.init = function() {

    var Map = qq.maps.Map;
    var Marker = qq.maps.Marker;
    var LatLng = qq.maps.LatLng;
    var Event = qq.maps.event;

    var MarkerImage = qq.maps.MarkerImage;
    var MarkerShape = qq.maps.MarkerShape;
    var MarkerAnimation = qq.maps.MarkerAnimation;
    var Point = qq.maps.Point;
    var Size = qq.maps.Size;
    var ALIGN = qq.maps.ALIGN;

    var MVCArray = qq.maps.MVCArray;
    var MarkerCluster = qq.maps.MarkerCluster;
    var Cluster = qq.maps.Cluster;
    var MarkerDecoration = qq.maps.MarkerDecoration;
    let mapbutton=$('mapButtion'); //拿到button对象
    let mapContainer=$('map_canvas');
    mapbutton.style.display="none";
    //创建关闭地图时的文字图层
    let closeMapButtonStyle = "padding:5px;border:2px solid #86acf2;background:#ffffff";
    let closeMapButton = document.createElement('div');
    closeMapButton.style.cssText=closeMapButtonStyle;
    closeMapButton.innerHTML="关闭地图";
    let closeHotMapButton=document.createElement('div');
    closeHotMapButton.style.cssText=closeMapButtonStyle
    closeHotMapButton.style.margin="0 5px"
    closeHotMapButton.innerHTML="关闭热力图显示";
    //给点击关闭地图按钮创建点击事件
    qq.maps.event.addListener(closeMapButton,'click',function(event){
      mapContainer.style.display="none";
      mapbutton.style.display="";
    });
    //点击显示按钮实现显示地图
    qq.maps.event.addDomListener(mapbutton,'click',function(event){
      mapContainer.style.display="";
      mapbutton.style.display="none";
    });
    var forEach = function (array, fun) {
      for (var i = 0, l = array.length; i < l; ++i) {
        if (fun(array[i], i) === false) {
          return false;
        }
      }
    };
    //默认地图中心设置为背景,设置地图的属性
    var latlng = new LatLng(39.91, 116.38);
    var options = {
      'zoom':16,
      maxZoom:16,
      minZoom:10,
      'center':latlng,
      'mapTypeId':"roadmap",
      keyboardShortcuts : false, //设置禁止通过键盘控制地图。默认情况下启用键盘快捷键。
      scrollwheel : true,        //设置滚动缩放默认不允许
      mapStyleId : 'style1'
    };
    //创建地图
    var map = new Map($('map_canvas'), options);
    //MVCArray类似于栈
    var markers = new MVCArray();
    var markerCluster;
    //设置Marker自定义图标的属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
    var anchor = new qq.maps.Point(0, 39),
        size = new qq.maps.Size(50, 50),
        origin = new qq.maps.Point(0, 0),
        icon = new qq.maps.MarkerImage(
            "../../../images/machine/自动售货机 (1).png",
            size,
            origin,
            anchor
        );
    //遍历data中的数据并且放入markers
    function createCluster() {
      for (var i = 0; i < machineSitedata.length; i++) {
        var latLng = new LatLng(machineSitedata[i][0], machineSitedata[i][1]);
        var decoration = new MarkerDecoration(i, new Point(0, -5));
        var marker = new Marker({
          position:latLng,
          map:map
        });
        //设置marks的属性
        marker.setVisible(true);
        //设置Marker的动画属性为从落下
        marker.setAnimation(qq.maps.MarkerAnimation.DOWN);
        marker.setIcon(icon);
        markers.push(marker);
      }
      //设置marks的图片等属性

      //创建一个点聚合的对象
      markerClusterer = new MarkerCluster({
        map:map, //设置点聚合的地图对象
        minimumClusterSize:2, //默认2
        markers:markers, //将所有点都添加到点聚合对象当中来
        zoomOnClick:true, //默认为true 点击已经聚合的标记点实现聚合分离
        gridSize:60, //默认60
        averageCenter:true, //默认false
        maxZoom:16, //默认18
      });
      Event.addListener(markerClusterer, 'clusterclick', function (evt) {
        // writeLog("mouse event", eventType);
        var ss =  evt;
        alert('点击了聚合点');
      });
    };
    //实现热力图部分，创建一个热力图对象
    var heat = new qq.maps.visualization.Heat({
      map: map, // 必填参数，指定显示热力图的地图对象
      radius: 15, // 辐射半径，默认为20
      //设置热力图颜色
      gradient: {
        0 : "#e0f8f8",
        0.1 : "#e0f8f8",
        0.2 : "#e0f8f8",
        0.3 : "#e0f8f8",
        0.4 : "#aef8f8",
        0.5 : "#aef8f8",
        0.6 : "#aef8f8",
        0.7 : "#aef8f8",
        0.8 : "#04fafa",
        0.9 : "#04fafa",
        1.0 : "#04fafa"
      }
    });
    // 获取热力数据
    var data = getHeatData();
    console.log(data);
    // 向热力图传入数据
    heat.setData(data);
    heat.hide();
    //给按钮添加事件实现点击隐藏/显示热力图
    qq.maps.event.addDomListener(closeHotMapButton,'click',function (event) {
       if(heat.visible){
         heat.hide();
       }else{
         heat.show();
       }
    })
    //将关闭地图的按钮添加到map对象当中
    map.controls[qq.maps.ControlPosition.TOP_CENTER].push(closeMapButton);
    map.controls[qq.maps.ControlPosition.TOP_CENTER].push(closeHotMapButton);
    //遍历data中的数据并且放入markers
    createCluster();
    //设置点的图片
    function getHeatData(cnt, max, min) {
      let data = [];
      let center = {
        lat: 39.9,
        lng: 116.4
      };
      cnt = cnt || 100;
      max = max || 100;
      min = min || 0;
      for (let index = 0; index < cnt; index++) {
        let r = Math.random();
        let angle = Math.random() * Math.PI * 2;
        let heatValue = Math.random() * (max - min) + min;
        data.push({
          lat: center.lat + r * Math.sin(angle),
          lng: center.lng + r * Math.cos(angle),
          value: heatValue
        });
      }
      return {
        max: max,
        min: min,
        data: data
      };
    }
  };

</script>
</body>
</html>
